<template>
  <div id="app">
    <div id="scroll_container">
      <router-view name="header" id="header"></router-view>
      <router-view id="main"></router-view>
      <router-view name="footer" id="footer"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style lang="less" >
html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-family:"微软雅黑";

  body{
    margin:0;
    padding:0;
    height: 100%;

    #app {
      width:640/40rem;
      margin:0 auto;
      height: 100%;
      overflow: hidden;

      div,img,ul{
        float:left;
      }

    #scroll_container{
      height: 100%;
      width:660/40rem;
      overflow: scroll;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-flex-flow: column;
      flex-flow: column;





    #main{
      z-index:0;
      width:640/40rem;
      overflow-x: hidden;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;


      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-flex-flow: column;
      flex-flow: column;
    }
    /*main end*/
    }
    /*scroll_container  end*/


    }
    /*app end*/


  }
  /*body end*/
}


</style>
